<template>
  <div class="container_hori content">
    <div class="left">
      <Box :show-header="false" class="left_table">
        <SortTable :columns="table.header" :data="table.data" :row-click="false" />
      </Box>
    </div>
    <div class="right container_vert_divide3">
      <Box title="预警区域分布">
        <PieChart :data="areaStats.data" :serie-name="areaStats.name"/>
      </Box>
      <Box title="预警类别统计">
        <MultiBarChart :data="typeStats.data" :legend="typeStats.legend" :color-array="typeStats.colorArray"/>
      </Box>
      <Box title="风险级别统计">
        <CircularBarChart :data="riskLevel.data" :serie-name="riskLevel.name"/>
      </Box>
    </div>
  </div>
</template>
<script setup>
import { ref, inject } from 'vue';
import Box from '@/components/Box.vue';
import PieChart from '@/components/PieChart.vue';
import SortTable from '@/components/SortTable.vue';
import MultiBarChart from '@/components/MultiBarChart.vue';
import CircularBarChart from '@/components/CircularBarChart.vue';
import { getYesterdayDateStr } from '@/utils/util';
import { history, area, type, level } from '@/api/warning';

const EventBus = inject('EventBus');
let yesterdayStr = getYesterdayDateStr();
const queryTime = ref({
  startTime: yesterdayStr + ' 00:00:00',
  endTime: yesterdayStr + ' 23:59:59'
});
EventBus.on('timequery', ({ startTime, endTime }) => {
  queryTime.value.startTime = startTime;
  queryTime.value.endTime = endTime;
  getTableData();
  getChartData();
});

const table = ref({
  data: [],
  header: [
    {
      title: '时间',
      dataIndex: 'createTime'
    },
    {
      title: '地点',
      dataIndex: 'address',
      align: 'center'
    },
    {
      title: '预警类别',
      dataIndex: 'type',
      align: 'center'
    },
    {
      title: '风险级别',
      dataIndex: 'riskLevel',
      align: 'center',
      sorter: (a, b) => a.riskLevel - b.riskLevel
    }
  ]
});

const areaStats = ref({
  data: [],
  name: '预警区域分布'
});

const typeStats = ref({
  data: [],
  legend: [],
  colorArray: undefined
});

const riskLevel = ref({
  data: [],
  name: '风险类别统计'
});

const getTableData = () => {
  history(queryTime.value).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      table.value.data = data;
    }
  });
};

const getChartData = () => {
  const reqestData = queryTime.value;
  area(reqestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      areaStats.value.data = data.map(({ area, value }) => {
        return {
          name: area,
          value
        };
      });
    }
  });
  type(reqestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      let legend = [];
      let _data = [];
      data.forEach(({ area, type, value }) => {
        let index = legend.indexOf(type);
        if (index < 0) {
          legend.push(type);
          index = legend.length - 1;
        }
        let arr = _data[index];
        if (!arr) {
          arr = [];
          _data[index] = arr;
        }
        arr.push({ name: area, value });
      });
      typeStats.value.data = _data;
      typeStats.value.legend = legend;
    }
  });
  level(reqestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      riskLevel.value.data = data.map(({ riskLevel, value }) => {
        return {
          name: riskLevel,
          value
        };
      });
    }
  });
};

getTableData();
getChartData();
</script>
<style lang="less" scoped>
.left {
  width: 75.7%;
  height: 100%;
}
.left > div {
  width: 100%;
  height: 100%;
}

.left_table {
  padding: 1.25rem 1.75rem;
}

.right {
  width: 24.5%;
  height: 100%;
}
</style>
